<div id="root">
    <qf-table :columns="userColumns" :data="userData"></qf-table>
    <qf-table :columns="goodsColumns" :data="goodsData"></qf-table>
</div>


<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./ui.js"></script>

<script>

const vm = new Vue({
    el: "#root",
    data:{

        userColumns:[
            {title: "编号", key:"id"},
            {title: "姓名", key:"uname"},
            {title: "性别", key:"sex"},
            {
                title: "性别另一种",
                key:"sex2",
                render:(row)=>`<b> ${row.sex2===1? "男" : "女"}</b>`
            }
        ],
        userData:[
            {id:1,uname:"张三", sex:"男",sex2:1},
            {id:2,uname:"李四", sex:"男",sex2:1},
            {id:3,uname:"王五", sex:"女",sex2:2}
        ],
        goodsColumns:[
            {title: "编号", key:"id"},
            {title: "商品名称", key:"title"},
            {title: "价格", key:"price"},
       ],
       goodsData:[
           {id:1,title:"商品1",price:1.1},
           {id:2,title:"商品2",price:1.2},
           {id:3,title:"商品3",price:1.3},
           {id:4,title:"商品4",price:1.4},
       ]
           
    },
})
</script>